<template>
  <div class="home">
    <div class="toper">
      <p>楼栋管理</p>
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>社区管理</el-breadcrumb-item>
        <el-breadcrumb-item>楼栋管理</el-breadcrumb-item>
        <el-breadcrumb-item>楼栋管理</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="box">
      <div class="headerECharts">
        <div id="myChart" ref="bin"></div>
      </div>
      <div class="header">
        <el-input placeholder="楼栋编码" v-model="num" clearable> </el-input>
        <el-input placeholder="楼栋名称" v-model="name" clearable> </el-input>
        <el-button
          style="background-color: #0bb197"
          type="success"
          icon="el-icon-search"
          @click="search"
          >查询</el-button
        >
        <el-button type="" icon="el-icon-refresh" class="reset" @click="reset"
          >重置</el-button
        >
      </div>
      <div class="body">
        <div class="bodyHeader">
          <p>查询结果列表</p>
          <el-button
            style="background-color: #0bb197"
            type="success"
            @click="addDialog = true"
            >新增</el-button
          >
        </div>
        <el-table :data="tableData" stripe style="width: 100%">
          <el-table-column align="center" prop="id" label="序号">
          </el-table-column>
          <el-table-column align="center" prop="communityName" label="小区名称">
          </el-table-column>
          <el-table-column align="center" prop="buildNum" label="楼栋编号">
          </el-table-column>
          <el-table-column align="center" prop="buildName" label="楼栋名称">
          </el-table-column>
          <el-table-column align="center" prop="buildArea" label="面积(m²)">
          </el-table-column>
          <el-table-column align="center" prop="remark" label="备注">
          </el-table-column>
          <el-table-column align="center" label="操作" width="200">
            <template slot-scope="scope">
              <el-button
                style="color: #0bb197"
                type="text"
                @click="handleEdit(scope.row), (editDialog = true)"
                >编辑</el-button
              >
              <el-button
                style="color: #0bb197"
                type="text"
                @click="deleteRow(scope.row.id)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          :background="true"
          class="msg-pagination-container"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes="[3, 10, 15, 20]"
          :page-size="count"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>

        <!-- 新增的弹出框 -->
        <el-dialog title="新增楼栋" :visible.sync="addDialog">
          <el-form :model="addData">
            <div class="addBox">
              <el-form-item style="width: 45%" label="小区名称">
                <el-select
                  style="width: 100%"
                  v-model="addData.comId"
                  clearable
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in cName"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </div>
            <div class="addBox">
              <el-form-item
                style="width: 45%; margin-right: 10%"
                label="楼栋编码"
              >
                <el-input
                  clearable
                  v-model="addData.buildNum"
                  autocomplete="off"
                  placeholder="例如：DD1232"
                  @blur="blurFn"
                ></el-input>
              </el-form-item>
              <el-form-item style="width: 45%" label="楼栋名称">
                <el-input
                  clearable
                  v-model="addData.buildName"
                  autocomplete="off"
                ></el-input>
              </el-form-item>
            </div>

            <div class="addBox">
              <el-form-item
                style="width: 45%; margin-right: 10%"
                label="面积(m²)"
              >
                <el-input
                  clearable
                  v-model="addData.buildArea"
                  autocomplete="off"
                ></el-input>
              </el-form-item>

              <el-form-item label="备注" style="width: 45%">
                <el-input
                  clearable
                  v-model="addData.remark"
                  autocomplete="off"
                ></el-input>
              </el-form-item>
            </div>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button
              type=""
              style="margin-right: 30px"
              class="reset"
              @click="addDialog = false"
              >取 消</el-button
            >
            <el-button type="success" class="btnColor" @click="add"
              >保 存</el-button
            >
          </div>
        </el-dialog>

        <!-- 编辑的弹出框 -->
        <el-dialog title="编辑楼栋" :visible.sync="editDialog">
          <el-form :model="editData">
            <div class="addBox">
              <el-form-item
                style="width: 45%; margin-right: 10%"
                label="楼栋编码"
              >
                <el-input
                  v-model="editData.buildNum"
                  autocomplete="off"
                  disabled
                ></el-input>
              </el-form-item>
              <el-form-item style="width: 45%" label="楼栋名称">
                <el-input
                  v-model="editData.buildName"
                  autocomplete="off"
                ></el-input>
              </el-form-item>
            </div>

            <div class="addBox">
              <el-form-item
                style="width: 45%; margin-right: 10%"
                label="面积(m²)"
              >
                <el-input
                  v-model="editData.buildArea"
                  autocomplete="off"
                ></el-input>
              </el-form-item>

              <el-form-item label="备注" style="width: 45%">
                <el-input
                  v-model="editData.remark"
                  autocomplete="off"
                ></el-input>
              </el-form-item>
            </div>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button
              type=""
              style="margin-right: 30px"
              class="reset"
              @click="editDialog = false"
              >取 消</el-button
            >
            <el-button type="success" class="btnColor" @click="edit"
              >保 存</el-button
            >
          </div>
        </el-dialog>
      </div>
    </div>
  </div>
</template>
<script>
import * as echarts from "echarts";
export default {
  data() {
    return {
      page: 1,
      count: 3,
      total: 1,
      addDialog: false,
      editDialog: false,
      num: "",
      name: "",
      tableData: [],
      addData: {
        comId: "",
        buildArea: 0,
        buildName: "",
        buildNum: "",

        remark: "",
      },
      editData: {},
      cName: [],
    };
  },
  methods: {
    binChart: function () {
      var myChart = echarts.init(this.$refs.bin);
      var option;
      option = {
        title: { text: "个别楼栋人数变化情况" },
        dataset: {
          source: [
            ["score", "人数", "product"],
            [189.3, 58212, "A栋"],
            [257.1, 78254, "B栋"],
            [150.1, 12755, "C栋"],
            [59.7, 20145, "D栋"],
            [68.1, 79146, "E栋"],
            [132.7, 20112, "F栋"],
          ],
        },
        grid: { left: "15%", top: "18%", width: "70%", height: "60%" },
        xAxis: { name: "人数" },
        yAxis: { type: "category" },
        visualMap: {
          orient: "horizontal",
          left: "center",
          min: 50,
          max: 400,
          text: ["High", "Low"],
          // Map the score column to color
          dimension: 0,
          inRange: {
            color: ["#65B581", "#FFCE34", "#FD665F"],
          },
        },
        series: [
          {
            type: "bar",
            encode: {
              // Map the "amount" column to X axis.
              x: "amount",
              // Map the "product" column to Y axis
              y: "product",
            },
          },
        ],
      };
      option && myChart.setOption(option);
    },
    handleSizeChange(val) {
      this.count = val;
      this.getData();
      // console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.page = val;
      this.getData();
      // console.log(`当前页: ${val},`, this.page);
    },
    getData: function () {
      this.$axios({
        url: "/smart/buildings/list",
        method: "POST",
        params: {
          pageNum: this.page,
          pageSize: this.count,
        },
        data: {
          buildName: this.name,
          buildNum: this.num,
        },
      }).then(({ data }) => {
        console.log(data);
        if (data.code == "00000") {
          this.tableData = data.data.list;
          this.total = data.data.total;
        } else {
          this.$message.error("数据加载失败！");
        }
      });
    },
    reset: function () {
      this.name = "";
      this.num = "";
      this.getData();
    },
    search: function () {
      this.getData();
    },
    add: function () {
      this.$axios({
        url: "/smart/buildings/add",
        method: "post",
        data: this.addData,
      }).then(({ data }) => {
        if (data.code == "00000") {
          this.$message.success("添加成功");
          this.addDialog = false;
          this.getData();
        } else {
          this.$message.error("添加失败");
        }
      });
    },
    deleteRow(row) {
      console.log(row);
      this.$axios({
        url: "/smart/buildings/del/" + row,
        method: "DELETE",
      }).then(({ data }) => {
        if (data.code == 0) {
          this.$message.success("删除成功");
          this.getData();
        } else {
          this.$message.error("删除失败");
        }
      });
    },
    handleEdit(row) {
      let editData = { ...row };
      this.editData = editData;
    },
    edit: function () {
      this.$axios({
        url: "/smart/buildings/edit",
        method: "put",
        data: this.editData,
      }).then(({ data }) => {
        if (data.code == "00000") {
          this.$message.success("修改成功");
          this.editDialog = false;
          this.getData();
        } else {
          this.$message.error("修改失败");
        }
      });
    },
    blurFn() {
      this.$axios({
        url: "/smart/buildings/judgeOne",
        method: "get",
        params: {
          buildNum: this.addData.buildNum,
        },
      }).then(({ data }) => {
        if (data.code == "B0001") {
          this.$message.error("编码重复了，请重新输入");
        }
      });
    },
    // 渲染小区名称、id
    getNames() {
      this.$axios({
        url: "/smart/community/list",
        method: "post",
        params: {
          pageNum: 1,
          pageSize: 1000000,
        },
        data: {
          comAddress: "",
          comName: "",
          comNum: "",
          id: 0,
          isDelete: 0,
        },
      }).then(({ data }) => {
        data.pageInfo.list.forEach((v, i) => {
          let item = {
            value: v.id,
            label: v.comName,
          };
          this.cName.push(item);
        });
      });
    },
  },
  mounted: function () {
    this.binChart();
    this.getData();
    this.getNames();
  },
};
</script>

<style lang="less" scoped>
.home {
  height: 95%;
  margin: 20px 20px 0px 20px;
  .toper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    p {
      margin-bottom: 20px;
      color: #333333;
    }
  }
  .box {
    display: flex;
    flex-direction: column;
    align-items: center;
    .headerECharts {
      width: 100%;
      height: 200px;
      background-color: #ffffff;
      border-radius: 8px;
      margin-bottom: 20px;
      display: flex;
      justify-content: center;
      align-items: center;
      #myChart {
        height: 100%;
        width: 65%;
      }
    }
    .header {
      width: 100%;
      height: 80px;
      background-color: #ffffff;
      border-radius: 8px;
      margin-bottom: 20px;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      .el-input {
        width: 200px;
        margin: 10px;
      }
      .el-dialog {
        width: 35%;
      }
    }
    .btnColor {
      background-color: #0bb197;
    }
    .dialog-footer {
      display: flex;
      justify-content: center;
    }
    .addBox {
      width: 100%;
      display: flex;
      justify-content: space-evenly;
    }
    .reset {
      background-color: white;
      color: #c0c4cc;
      border: 1px solid #c0c4cc;
    }
    .reset:hover {
      color: #0bb197;
    }

    .body {
      width: 100%;
      background-color: #ffffff;
      border-radius: 8px;
      .bodyHeader {
        display: flex;
        align-items: center;
        justify-content: space-between;
        p {
          color: #3c4145;
          margin: 20px 0px 0px 20px;
          font-weight: bold;
        }
        .el-button {
          margin: 20px 20px 0px 20px;
        }
      }
      .el-pagination {
        margin: 20px 10px 50px 0px;
        text-align: right;
      }
    }
  }
}
</style>
<style>
.msg-pagination-container.is-background .el-pager li:not(.disabled).active {
  /*当前选中页数的样式进行修改*/
  background-color: #0bb197;
  color: #fff;
}
</style>
